<!DOCTYPE html>
<html lang="en">
<head>
  {{template "pc/public/mycss.html" .}}
</head>
<style type="text/css">
	#wrapper{
		background: #f5f5f5!important;
	}
	.header-center{
		background: #fff;
	}
	.user_left{
		background: #fff;
	}
	.fenlei{
		width: 20%;
	}
	
	@media (max-width: 992px){
		.fenlei{
		    width: 100%;
		}
	}
  .default_icon{color: #fff;background: #e54242;padding:3px 7px;border-radius: 5px;margin-right: 5px;}
  .setaddress #content .addsite button{margin-left:20px;margin-top: 30px;width: 80px;height: 30px; }
</style>
<body class="common-home res layout-home1 setaddress">
<div id="wrapper" class="wrapper-full banners-effect-7">
	<!-- Header Container  -->
	{{template "pc/public/head.html" .}}
  {{template "pc/public/mytop.html" .}}
	<div class="main-container container">
		<div class="row mb-50">
			<!--Left Part Start -->
			{{template "pc/public/myleft.html" .}}
			<!--Middle Part Start-->
			<div id="content" class="col-md-10 col-sm-8 right mt-15">
				<p class="hd">收货地址</p>
        <div class="addsite">
        <form>
          <input type="hidden" name="id">
          <dl>
            <dt>收货人</dt>
            <dd><input type="text" name="name" placeholder="请输入收货人姓名"></dd>
          </dl>
          <dl>
            <dt>手机号码</dt>
            <dd><input type="text" name="mobile" placeholder="请输入手机号码"></dd>
          </dl>
          <dl>
            <dt>所在地区</dt>
            <dd>
              <select name="province">
                 {{range $k,$v:=.province}}
                <option value="{{$v.code}}">{{$v.name}}</opetion>
                  {{end}}
              </select>
              {{range $k,$v:=.province}}
              {{if eq $k 0}}
              {{range $k2,$v2:=$v.city}}
              <select name="city">
                <option value="{{$v2.code}}">{{$v2.name}}</opetion>
              </select>
              {{if eq $k2 0}}
              <select name="area">
                {{range $v2.area}}
                <option value="{{.code}}">{{.name}}</opetion>
                {{end}}
              </select>
              {{end}}
              {{end}}
              {{end}}
              {{end}}
            </dd>
          </dl>
          <script type="text/javascript">
          </script>
          <dl>
            <dt>详细地址</dt>
            <dd><input type="text" name="address" placeholder="请输入详细地址"></dd>
          </dl>
        </form>
					<button id="save">保存</button>
				</div>
            	<table>
            		<tr>
            			<th>收货人</th>
            			<th>所在地区</th>
            			<th>详细地址</th>
            			<th>手机</th>
            			<th>操作</th>
            			<th></th>
            		</tr>
                {{range $k,$v:=.info}}
            		<tr id="{{$v.id}}">
            			<td>{{if eq $v.default "1"}}<span class="default_icon">默认</span>{{end}}{{$v.name}}</td>
            			<td>{{$v.shen}} {{$v.shi}} {{$v.qu}}</td>
            			<td>{{$v.address}}</td>
            			<td>{{$v.mobile}}</td>
            			<td><a data-index="{{$k}}" class="editt">编辑</a> | <a data-index="{{$k}}" class="del">删除</a></td>
            			<td>{{if ne $v.default "1"}}<button class="default" data-id="{{$v.id}}">默认地址</button>{{end}}</td>
            		</tr>
                {{end}}
            	</table>
            </div>
		</div>
	</div>
</div>
{{template "pc/public/foot.html" .}}
{{template "pc/public/myfoot.html" .}}
</body>
<script type="text/javascript">
  var info={{.info}};
  var province={{.province}};
  $('.del').click(function(){
    var index=$(this).attr('data-index')
    var id=info[index].id
    wxc.xcConfirm("您确定要删除吗?","confirm",{onOk:function(){
      $.ajax({
        url:window.location.href,
        data:{id:id,table:'mt_member_address'},
        type:'post',
        success:function(res) {
          if(res==1){
            showToast('删除成功');
            $('#'+id).remove()
            info.splice(index, 1)
          }else{
            showToast('网络繁忙,请重试');
          }
        }
      })  
    }});
  });
  $('.editt').click(function(){
    var index=$(this).attr('data-index')
    var einfo=info[index]
    $('input[name="id"]').val(einfo.id)
    $('input[name="name"]').val(einfo.name)
    $('input[name="mobile"]').val(einfo.mobile)
    $('input[name="address"]').val(einfo.address)
    var provincehtml='';
    var cityhtml='';
    var areahtml='';
    for(var i=0;i<province.length;i++){
      if(province[i].code==einfo.province){
        provincehtml+=`<option value="`+province[i].code+`" selected>`+province[i].name+`</opetion>`
        for(var j=0;j<province[i].city.length;j++){
          if(province[i].city[j].code==einfo.city){
            cityhtml+=`<option value="`+province[i].city[j].code+`" selected>`+province[i].city[j].name+`</opetion>`
            for(var k=0;k<province[i].city[j].area.length;k++){
              if(province[i].city[j].area[k].code==einfo.area){
                areahtml+=`<option value="`+province[i].city[j].area[k].code+`" selected>`+province[i].city[j].area[k].name+`</opetion>`
              }else{ 
                areahtml+=`<option value="`+province[i].city[j].area[k].code+`">`+province[i].city[j].area[k].name+`</opetion>`
              }
            }
          }else{
            cityhtml+=`<option value="`+province[i].city[j].code+`">`+province[i].city[j].name+`</opetion>`
          }
        }
      }else{
        provincehtml+=`<option value="`+province[i].code+`">`+province[i].name+`</opetion>`
      }
    }
    $('select[name="province"]').html(provincehtml);
    $('select[name="city"]').html(cityhtml);
    $('select[name="area"]').html(areahtml);
  })
  $('select[name="province"]').change(function(){
    var code=$(this).val()
    var cityhtml='';
    var areahtml='';
    for(var i=0;i<province.length;i++){
      if(province[i].code==code){
        for(var j=0;j<province[i].city.length;j++){
          cityhtml+=`<option value="`+province[i].city[j].code+`">`+province[i].city[j].name+`</opetion>`
          if(j==0){
            for(var k=0;k<province[i].city[0].area.length;k++){
              areahtml+=`<option value="`+province[i].city[0].area[k].code+`">`+province[i].city[0].area[k].name+`</opetion>`
            }
          }
        }
        break
      }
    };
    $('select[name="city"]').html(cityhtml);
    $('select[name="area"]').html(areahtml);
  })
  $('select[name="city"]').change(function(){
    var code=$(this).val()
    var areahtml='';
    for(var i=0;i<province.length;i++){
      for(var j=0;j<province[i].city.length;j++){
        if(province[i].city[j].code==code){
          for(var k=0;k<province[i].city[j].area.length;k++){
            areahtml+=`<option value="`+province[i].city[j].area[k].code+`">`+province[i].city[j].area[k].name+`</opetion>`
          }
          break
        }
      }
    };
    $('select[name="area"]').html(areahtml);
  })
  $('#save').click(function(){
    var form=$('form').serialize()
    if(!$('input[name="name"]').val()){showToast('请输入收货人姓名'); return false; };
    if(!$('input[name="mobile"]').val()){showToast('请输入手机号码'); return false; };
    if(!$('input[name="address"]').val()){showToast('请输入详细地址'); return false; };
    $.ajax({
      url:window.location.href,
      type:'post',
      data:form,
      success:function(res){
        if (res==1) {
          showToast("保存成功!");
          setTimeout(function(){history.go(0)}, 1000)
        }else{
          showToast("网络繁忙,请稍后再试!");
        }
      }
    })
  })
  $('.default').click(function(){
    var id=$(this).attr('data-id')
    $.ajax({
      url:'/my/address_default',
      data:{id:id},
      success:function(res){
        if (res==1) {
          showToast("设置成功!");
          setTimeout(function(){history.go(0)}, 500)
        }else{
          showToast("网络繁忙,请稍后再试!");
        }
      }
    })
  })
</script>
</html>

